<template >
  <div class='login'>
    <div class="form">
      <h2>登录</h2>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item >
          <a-input
            v-decorator="['loginName', { rules: [{ required: true, message: '请输入用户名!' }] }]"
            placeholder="用户名"
          />
        </a-form-item>
        <a-form-item >
          <a-input
            v-decorator="['password', { rules: [{ required: true, message: '请输入密码!' }] }]"
            placeholder="密码"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }" class="login-form-but">
          <a-button type="primary" html-type="submit" class="login-form-button">
            登录
          </a-button>
        </a-form-item>
      </a-form>
      <p>没有账号吗？ 点击<a href="#">注册</a></p>
      <p><a href="#">忘记密码？</a></p>
    </div>
  </div>
</template>

<script>
import './styles.less'

export default {
  data() {
    return {
      formLayout: 'inline',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('form: ', values);
        }
      });
    },
  },
};

</script>


